<script setup>
import { ref , onMounted } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'

const map = ref(null)

const initMap = () => {
  map.value = new Map({
    target:'map',
    layers: [
      new TileLayer({
        source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
        zIndex: 0
      })
    ],
    view: new View({
      center: [-10997148, 4569099],
      zoom: 4,
    })

  })
}

onMounted(initMap)
</script>


<template>
  <div id="map">
  </div>
</template>


<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>